<template>
  <!-- 所有报名款 管理 -->
  <div class="moneyPage">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card class="cardBox A">
          <p>汇总收入</p>
          <div>
            <p class="allM">￥{{total.price}}</p>
            <p class="ssf">
              <span>汇总手续费</span>
              <span>￥{{total.servicePrice}}</span>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="allCon">
      <el-select v-model="mId" filterable clearable placeholder="请选择赛事" class="select" @change="getdetail()">
        <el-option
          v-for="item in allM"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-table :data="moneyData" class="tab">
        <el-table-column prop="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="price" label="总收入"></el-table-column>
        <el-table-column prop="servicePrice" label="总手续费"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="{row}">
            <el-button type="text" @click="godetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moneyData: [],
      total: { price: 0, servicePrice: 0 },
      mId: '',
      allM:[]
    };
  },
  methods: {
    godetail(row) {
      console.log(row);
      let q = this.$Base64.encode(row.id);
      sessionStorage.setItem("mold", this.$Base64.encode(row.type)); // 类型 赛事 活动
      sessionStorage.setItem("MandA", q);
      this.$router.push({ path: "/match/money/am_money" });
    },
    getTotal() {
      this.$axios
        .get(
          "/sbr/signUp/order/getAnalyseSumPriceByOrgId/" +
            this.$Base64.encode(this.$orgId)
        )
        .then((res) => {
          let rr = res.data.data;
          this.total = rr;
        });
    },
    getdetail() {
      let p = this.$orgId + "&" + Number(this.mId);
      this.$axios
        .get("/sbr/signUp/order/getAnalyseByOrgId/" + this.$Base64.encode(p))
        .then((res) => {
          let rr = res.data.data;
          if (rr) {
            rr.forEach((v, i) => {
              v.index = i + 1;
            });
            this.moneyData = rr;
            if(Number(this.mId)==0)this.allM=rr.map(v=>{return {id:v.id,name:v.name}})
          }
        });
    },
  },
  created() {
    this.getTotal();
    this.getdetail();
  },
};
</script>
<style scoped>
.moneyPage {
  width: calc(100% - 30px);
  padding: 15px;
}
.cardBox {
  color: #fff;
  overflow: hidden;
}
.A {
  background-color: #5b8ff9;
}
.allM {
  line-height: 50px;
  font-size: 25px;
  border-bottom: 1px solid #fff;
}
.ssf {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.allCon {
  /* width: calc(100% - 20px); */
  margin: 10px auto;
  padding: 10px;
  background-color: #fff;
}
.tab {
  width: 100%;
}
.select{
    width: 280px;
}
</style>